<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no"/>
<meta name="description" content="">
<meta name="keywords" content="">
<title>dropload-tab</title>
<link type="text/css" rel="stylesheet" href="css/reset-min.css">
<link type="text/css" rel="stylesheet" href="css/layout.css">
<style type="text/css">
/*没有数据的图片*/
.noshop{display: none}

/*上拉加载的loading*/
.dropload-up,.dropload-down{
    position: relative;
    height: 0;
    overflow: hidden;
    font-size: 12px;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
}
.dropload-down{
    height: 50px;
}
.dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.dropload-load .load{
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 100%;
    margin: 6px;
    border: 2px solid #666;
    border-bottom-color: transparent;
    vertical-align: middle;
    -webkit-animation: rotate 0.75s linear infinite;
    animation: rotate 0.75s linear infinite;
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
</style>
</head>
<body>
    <div class="loading" style="display: none;"></div>
    <div class="viewpoint">
        <ul class="mstab clearfix">
            <li class="cur">今日秒杀</li>
            <li>明日预告</li>
        </ul>
        <div class="section">
            <!--今日秒杀-->
            <div class="sectionms  bge" id="sectionms1">
                <div class="noshop"></div>
                <ul class="mslist" id="mslist1">

                </ul>                
            </div>
            
            <!--明日预告-->
            <div class="sectionms hide bge" id="sectionms2">
                <div class="noshop"></div>
                <ul class="mslist" id="mslist2">
                
                </ul>
            </div>
        </div>  
    <!--分享弹窗-->
    <div class="pop-share hide">
        <img src="https://img.mpimg.cn/web/wap/common/share.png" class="pic-share">
        <h4>分享即可参与</h4>
        <a onclick="$('.pop-share').hide();">返回</a>
    </div>

    <!--编辑弹窗-->
    <div class="pop-detail pop1 hide">
        <div class="detail-txt">
            <h3>编辑</h3>
            <a onclick="$('.pop1').hide();" class="closed">&times;</a>
            
        </div>
    </div>

<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/dropload.min.js"></script>

<script>
    //点击设置提醒
    $(".btn1").click(function(){
        alert_msg()
        $('.detail-txt h3').html('设置提醒成功')
    })
    //信息提示弹窗
    function alert_msg(){
        $('.pop1').fadeIn(300);
        setTimeout(function(){
            $('.pop1').fadeOut(300);
        },2500)
    }

    //今日秒杀和明日预告 切换
$(function(){
    var dropload;
    var itemIndex = 0;
    var pageSize = 5;//每页展示的数量
    var counter1 = 0, counter2 = 0;//页数
    var tab1LoadEnd = false;
    var tab2LoadEnd = false;
    // tab
    $('.mstab li').on('click',function(){
        var $this = $(this);
        itemIndex = $this.index();
        $(this).addClass('cur').siblings('li').removeClass('cur');
       $('.sectionms').addClass('hide').eq($(this).index()).removeClass('hide');

        // 如果选中菜单一
        if(itemIndex == '0'){
            $('#mslist2').empty();
            $('.noshop').hide();
            counter2 = 0;
            // 如果数据没有加载完
            if(!tab1LoadEnd){
                console.log(111)
                // 解锁
                tab1LoadEnd = true;
                tab2LoadEnd = false;
                dropload.unlock();
                dropload.noData(false);
            }else{
                return false;
            }
        // 如果选中菜单二
        }else if(itemIndex == '1'){
            $('#mslist1').empty();
            $('.noshop').hide();
            counter1 = 0;
            if(!tab2LoadEnd){
                // 解锁
                tab2LoadEnd = true;
                tab1LoadEnd = false;
                dropload.unlock();
                dropload.noData(false);
            }else{
                console.log(4444)
                return false;
            }
        }
        console.log('itemIndex:'+itemIndex)
        // 重置
        dropload.resetload();
    });

    // dropload
    dropload = $('.section').dropload({
        scrollArea : window,
        domUp : {
            domClass   : 'dropload-up',
            domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
            domUpdate  : '<div class="dropload-update">↑释放更新</div>',
            domLoad    : '<div class="dropload-load"><span class="load"></span>加载中...</div>'
        },
        domDown : {
            domClass   : 'dropload-down',
            domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
            domLoad    : '<div class="dropload-load"><span class="load"></span>加载中...</div>',
            domNoData  : '<div class="dropload-noData">暂无数据</div>'
        },
        loadDownFn : function(me){
            // 加载菜单一的数据
            if(itemIndex == '0'){
                $.ajax({
                    type: 'GET',
                    url: 'js/json.js',
                    dataType: 'json',
                    data:{page:counter1,pageSize:10},
                    success: function(data){
                        console.log('page1:='+data)
                        console.log(data)
                        var result = '';
                         counter1++;
                        if( data.lists.length > 0 ){
                            $('.noshop').hide();
                            for(var i = 0; i < data.lists.length; i++){
                                result+='<li class="clearfix">'
                                    +'<div class="imglf fl">'
                                    +'<a href="'+data.lists[i].link+'">'
                                    +'<p class="img1" style="background:url('+data.lists[i].pic+') no-repeat 50% 50%;background-size:cover">'
                                    +'<span>距结束还有 00:12:50</span>'
                                    +'</p></a><p class="txt1">已抢50% <span class="progress fr"><em style="width:50%"></em></span></p>'
                                    +'</div><div class="con1 fr"><a href=""><p class="t1 ellipsis">'+data.lists[i].title+'</p>'
                                    +'<p class="txt2 ellipsis">BLC果柔洗颜美容卸妆乳150ml</p><p class="msj">秒杀价 <span>¥159.00 </span> <em>¥ 500</em></p></a><div class="clearfix"><span class="mdf fl">'+data.lists[i].date+'</span>a class="fr btn-qg bgf82946">抢购</a></div></div></li>';
                            }
                        }else{                           
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();                           
                            if (result=='') {                                 
                                $('.noshop').show()
                            };
                            
                        }
                       
                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            if( counter1 <= 1 ){
                                $('#mslist1').empty();
                            }
                            $('#mslist1').append(result);
                            $('#sectionms1').show()
                            // 每次数据加载完，必须重置
                            me.resetload();
                        },1000);
                        
                    },
                    error: function(xhr, type){
                        console.log('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            // 加载菜单二的数据
            }else if(itemIndex == '1'){
                $.ajax({
                    type: 'GET',
                    url: 'js/json1.js',
                    dataType: 'json',
                    data:{counter1:0,pageSize:10},
                    success: function(data){
                        console.log('page2:='+data)
                        console.log(data)
                        var result = '';
                        counter2++;
                        if( data.lists.length > 0 ){
                            $('.noshop').hide();
                            for(var i = 0; i < data.lists.length; i++){    
                                result+='<li class="clearfix">'
                                    +'<div class="imglf fl">'
                                    +'<a href="'+data.lists[i].link+'">'
                                    +'<p class="img1" style="background:url('+data.lists[i].pic+') no-repeat 50% 50%;background-size:cover">'
                                    +'<span>距结束还有 00:12:50</span>'
                                    +'</p></a><p class="txt1">已抢50% <span class="progress fr"><em style="width:50%"></em></span></p>'
                                    +'</div><div class="con1 fr"><a href=""><p class="t1 ellipsis">'+data.lists[i].title+'</p>'
                                    +'<p class="txt2 ellipsis">BLC果柔洗颜美容卸妆乳150ml</p><p class="msj">秒杀价 <span>¥159.00 </span> <em>¥ 500</em></p></a><div class="clearfix"><span class="mdf fl">'+data.lists[i].date+'</span>a class="fr btn-qg bgf82946">抢购</a></div></div></li>';
                            }   
                        }else{                            
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();                            
                            if (result=='') {                                 
                                $('.noshop').show()                            
                            };
                        }
                        
                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            if( counter2 <= 1 ){
                                $('#mslist2').empty();
                            }
                            $('#mslist2').append(result);
                            $('#sectionms2').show()
                            // 每次数据加载完，必须重置
                            me.resetload();
                        },1000);
                    },
                    error: function(xhr, type){
                        console.log('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            }
        }
    });
});


</script>

</body> 
</html>
